<template>
  <div v-if="list.length" class="table-list-wrapper">
    <el-table :data="list" style="width: 100%" border :height="height">
      <el-table-column prop="order_no" label="订单号" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.order_no }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户" width="">
        <template slot-scope="scope">
          <p>{{ scope.row.user_nickname }}</p>
          <p>{{ scope.row.user_phone }}</p>
        </template>
      </el-table-column>
      <el-table-column label="课程内容" width="350">
        <template slot-scope="scope">
          <div class="d-flex">
            <div style="width: 50px; margin-right: 20px">
              <el-avatar :size="50" :src="scope.row.course_cover" shape="square" @click.native="handleImgClick(scope.row.permit_img)" />
            </div>
            <div style="width:200px">
              <p>{{ scope.row.course_name }}</p>
              <p v-if="scope.row.order_cate === 1" class="width: 150px">所属课程：{{ scope.row.belongCourseName }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderCate" label="类型" width="" />
      <el-table-column prop="order_amount" label="价格" width="" />
      <el-table-column prop="orderStatus" label="状态" width="200" />
      <el-table-column prop="created_at" label="下单时间" width="210" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else>
            <span class="detail agree" @click="detail(scope.row)">订单详情</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <order-detail ref="orderDetail" :order-id="orderId" />
  </div>
</template>
<script>
import OrderDetail from '@/views/order/order-detail'
export default {
  components: {
    OrderDetail
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      orderId: '',
      height: 0,
      dialogVisible: false,
      id: '',
      dialogImageUrl: '',
      imgDialogVisiable: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.resitHeight()
    })
  },
  methods: {
    showSecTitle() {
    },
    detail(item) {
      this.orderId = item.order_id
      this.$refs.orderDetail.show()
    },
    handleImgClick(img) {
      this.dialogImageUrl = img
      this.imgDialogVisiable = true
    },
    handleAgree(scope) {
      this._dealWithShopApply({ status: 'pass', id: scope.row.id })
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleRefuse(scope) {
      this.dialogVisible = true
      this.id = scope.row.id
    },
    handleCloseDialog(params) {
      this.dialogVisible = false
      this._dealWithShopApply({ status: 'return', id: this.id, remark: params.remark })
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    resitHeight() {
      this.height = document.body.clientHeight - 560
      window.onresize = () => {
        this.height = document.body.clientHeight - 560
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .agree {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .refuse {
    color: #f56c6c;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell{
  .el-avatar{
    margin-right: 15px;
  }
}
.table-list-wrapper{
  margin-top: 35px;
}
.d-flex{
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
